<template>
                              <el-row>
                                <el-col :span="24">
                                  <h3>上传中期附件</h3>
                                </el-col>
                              </el-row>
     <el-form :model="currentRow" label-position="left"  style="background-color: white;">
                            <el-row :gutter="2">
                                      <el-col :span="7">
                                        <el-form-item label="项目名称" label-width="80px">
                                          <el-text class="mx-1">{{ currentRow.name }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="9">
                                        <el-form-item label="项目编号" label-width="80px">
                                          <el-text class="mx-1">{{ currentRow.projectId }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="8">
                                        <el-form-item label="项目类型" label-width="80px">
                                          <el-text class="mx-1">{{ textCategory(currentRow.category) }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                    </el-row>

                                    <!-- 第二行 -->
                                    <el-row :gutter="2">
                                      <el-col :span="7">
                                        <el-form-item label="负责人" label-width="80px">
                                          <el-text class="mx-1">{{ currentRow.masterName }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="9">
                                        <el-form-item label="学号" label-width="80px">
                                          <el-text class="mx-1">{{ currentRow.masterId }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="8">
                                        <el-form-item label="老师" label-width="80px">
                                          <el-text class="mx-1">{{ currentRow.tutorName }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                    </el-row>
                                    
                        </el-form>
                        <el-form-item label="上传附件" style="background-color: white; display: flex; align-items: center;" >
                            <div>
                            <el-upload
                                    v-model:file-list="fileList"
                                    class="upload-demo"
                                    multiple
                                    :on-change="handleFileChange"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    :before-remove="beforeRemove"
                                    :limit="3"
                                    :on-exceed="handleExceed"
                                    :headers="uploadHeaders"
                                    :data="projectInfo"
                                    :auto-upload="false"
                                    @click.stop="onClickUpload"
                                  >
                                    <el-button type="primary" >上传附件</el-button>
                                </el-upload>
                            </div>
                           
                                
                        </el-form-item>
                        <el-form-item label="确定上传" style="background-color: white; display: flex; align-items: center;" >
                            <el-button type="primary" @click="saveMidAccessory">确认</el-button>
                        </el-form-item>  
</template>
<style scoped>

</style>

<script setup>
import { Search } from '@element-plus/icons-vue'
import {getMidService,getErrorDetailService,uploadMidService,uploadService} from "@/api/Item.js"
import { ElMessage,ElMessageBox  } from 'element-plus';
import { ref } from 'vue';

//获取路径id
import { useRoute } from 'vue-router';
const route = useRoute();
 // 获取路径参数 'id'
 const id = ref(route.query.id);
 const type=ref(route.query.type)
  console.log(id.value)



//提交文件数据模型
const currentRow=ref({
    name:'',
    projectId:'',
    tutorName:'',
    masterName:'',
    masterId:'',
    category:'',
    msg:''
})

//项目未通过详情
const handleDetail=async()=> {

  
let result= await getErrorDetailService(type.value,id.value)
  console.log(result.data)
  currentRow.value=result.data
  }
handleDetail();

//失败详情显示项目类型
const textCategory=(category)=>{
    const categoryMap={
        0:'创新训练项目',
        1:"创业训练项目",
        2:"创业实践项目"

    }
    return categoryMap[category]
}
//文件
const fileList = ref([
])
const handleRemove = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfer of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  )
}
const onClickUpload = (event) => {
  // 这里可以留空，因为.stop已经处理了阻止冒泡的逻辑
};
//上传附件
// 存储上传后的文件信息
const extractedData = ref([]);
const fileIndex=ref(0)
const handleFileChange=async(file)=>{
   let result=await uploadService(file,1)
   console.log(result.data)
   fileList.value=result.data
  console.log(fileList.value)
}

import { useRouter } from 'vue-router';
const router = useRouter();
//保存中期附件
const saveMidAccessory=async()=>{
    console.log(fileList.value)
     extractedData.value = fileList.value.map(file => ({
    name: file.name,
    url: file.url
  }));
    let result=await uploadMidService(extractedData.value,currentRow.value.projectId)
    if(result.code===200){
      ElMessage.success("提交中期附件成功")
    }

    router.push({ path: '/project/mid_term' });
   
}

</script>
